<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义的指令</title>
  <link rel="stylesheet" href="0716/css/bootstrap.min.css">
</head>
<body ng-app="app" ng-controller="appctrl">

<section class="container">
  <h1>自定义的指令</h1>
  <hr>

  <!--<tabs>-->
  <!--<pane title="标题1">-->
  <!--<div>This is the content of the first tab.</div>-->
  <!--</pane>-->
  <!--<pane title="标题2">-->
  <!--<div>This is the content of the second tab.</div>-->
  <!--</pane>-->
  <!--</tabs>-->

  <cc-input
      name="{{itemName}}"
      amount="itemName">
  </cc-input>

  <input type="text" class="form-control" ng-model="sscon" cc-read>

  <span ng-repeat="(key, value) in obj">
    {{ key }}<br>
  </span>

</section>

<script src="angular.min.js"></script>
<script>
  var app = angular.module('app', []);
  app.controller('appctrl', function ($scope) {
    $scope.itemName = 'hello world';
    $scope.sscon = 'allo Toma';

    $scope.obj = {
      dl:{
        o:12,
        m:10
      },
      dd:{
        o:11,
        m:99
      },
    }
  });

  // 定义的第一个E指令
  app.directive('ccInput', function () {
    return {
      restrict: 'E',
      scope: {
        name: '@',
        amount: '='
      },
      template:
        '<div class="form-group">' +
        '<input type="text" class="form-control" name="{{name}}" ng-model="amount" required>' +
        '<p>{{name}}</p>' +
        '</div>',
      replace: true,
      transclude: true,
      link: function (scope, element, attrs) {
        console.log('!! - '+ scope.name);
        scope.$watch('amount', function (to, from) {
          console.log(from + '--->' + to);
        });
      }
    }
  });



  /* ---------------------------------------------------------------- */

  // tabs 组件
  app.directive('tabs', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: ["$scope", function ($scope) {
        var panes = $scope.panes = [];

        $scope.select = function (pane) {
          angular.forEach(panes, function (pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

        this.addPane = function (pane) {
          if (panes.length == 0) $scope.select(pane);
          panes.push(pane);
        }
      }],
      template: '<div class="tabbable">' +
      '<ul class="nav nav-tabs">' +
      '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
      '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
      '</li>' +
      '</ul>' +
      '<div class="tab-content" ng-transclude></div>' +
      '</div>',
      replace: true
    };
  }).directive('pane', function () {
    return {
      require: '^tabs',
      restrict: 'E',
      transclude: true,
      scope: {title: '@'},
      link: function (scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
      '</div>',
      replace: true
    };
  });


  // 创建"my-dir"指令
  // @link http://www.cnblogs.com/powertoolsteam/p/angularjs-custom-directive.html
  //
  //  app.directive("myDir", function() {
  //    return {
  //      restrict: "E",        // 指令是一个元素 (并非属性)
  //      scope: {              // 设置指令对于的scope
  //        name: "@",          // name 值传递 （@ 字符串，单向绑定）
  //        amount: "=",        // amount 引用传递（= 双向绑定）
  //        save: "&"           // 保存操作 (& 示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作)
  //      },
  //      template:             // 替换HTML (使用scope中的变量)
  //      "<div>" +
  //      "  {{name}}: <input ng-model='amount' />" +
  //      "  <button ng-click='save()'>Save</button>" +
  //      "</div>",
  //      replace: true,        // 使用模板替换原始标记
  //      transclude: false,    // 不复制原始HTML内容
  //      controller: [ "$scope", function ($scope) {}],
  //      link: function (scope, element, attrs, controller) {}
  //    }
  //  });

  //  <h3>自定义指令</h3>
  //  <my-dir
  //  name="{{customerName}}"
  //  amount="credit"
  //  save="saveChanges(' [自定义指令] ')">
  //  </my-dir>


</script>
</body>
</html>